<template>
    <Row :gutter="30">
        <Card style="margin:0 0 20px 0px">
            <Row class="form-row">
                <Form label-position="right" :model="filters" :label-width="90" inline>
                    <FormItem label="小区">
                        <div class="filters-input">
                            <el-select v-model="filters.housingId" filterable default-first-option placeholder="请选择小区"
                                       @change="housechange" no-data-text="暂无数据">
                                <el-option v-for="item in houseList" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="路线">
                        <div class="filters-input">
                            <el-select v-model="filters.route" filterable default-first-option placeholder="请选择路线"
                                       no-data-text="暂无数据">
                                <el-option v-for="item in routeList" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <Button type="primary" icon="ios-search" size="large" @click="loadData()">
                        搜索
                    </Button>
                </Form>
            </Row>

            <el-table stripe border :data="tableData" size="large" ref="table">
                <template slot="empty">暂无数据</template>
                <el-table-column prop="housingName" label="小区"></el-table-column>
                <el-table-column prop="routeName" label="路线"></el-table-column>
                <el-table-column prop="userName" label="巡逻人"></el-table-column>
                <el-table-column prop="currentName" label="当前巡更地点"></el-table-column>
                <el-table-column prop="patrolStart" label="开始巡更时间"></el-table-column>
                <el-table-column prop="patrolEnd" label="结束巡更时间"></el-table-column>
                <el-table-column label="巡更状态">
                    <template slot-scope="scope">
                        <p v-if="scope.row.patrolStatus == 1" style="color:blue">正在巡更</p>
                        <p v-if="scope.row.patrolStatus == 2" style="color:blue">完成巡更</p>
                    </template>
                </el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="scope">
                        <p v-if="scope.row.status == 1" style="color:red">异常</p>
                        <p v-if="scope.row.status == 2" style="color:green">正常</p>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="routeInfo( scope.row)">巡更详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                  show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>
        </Card>
    </Row>
</template>
<script>
    export default {
        data() {
            return {
                houseList: [],
                routeList:[],
                modalType: "add",
                //页码
                pageNum: 1,
                //每页数量
                pageSize: 10,
                //总数
                pageTotal: 0,
                formVisible: false,
                modal: {},
                filters: {
                    housingId: "",
                },
                //表单提交状态
                formLoading: false,
                tableData: [],
            };
        },

        created: function () {
            this.loadData();
            this.gethouse();
        },
        methods: {
            //加载小区
            gethouse() {
                let url = "/api/housing/getHousingByLogin";
                this.postRequest(url).then(res => {
                    this.houseList = res;
                    this.filters.housingId = res[0].id;
                    this.housechange(this.filters.housingId);
                });
            },
            //选择小区，加载路线
            housechange(housingId){
                this.postRequest("/api/patrol/getRouteAndAddress?housingId="+housingId).then(res => {
                    if(res.code==20000){
                        this.routeList = res.data;
                    }
                });
            },
            //加载数据
            loadData() {
                let params = this.filters;
                params.pageNum = this.pageNum;
                params.pageSize = this.pageSize;
                //与后台交换数据
                this.postRequest("/api/patrol/recordLoadData", params).then(res => {
                    console.log(res)
                    if (res.code == 20000) {
                        this.tableData = res.data.list;
                        this.pageTotal = res.data.total;
                    } else {
                        this.tableData = [];
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            //路线详情
            routeInfo(row){
                console.log(row)
                this.$router.push({path: 'info',
                    query:{
                        recordId:row.id,
                        housingId:row.housingId,
                        housingName:row.housingName,
                        route:row.route,
                        routeName:row.routeName,
                        patrolStart:row.patrolStart,
                        patrolEnd:row.patrolEnd,
                }})
            },
            handlePage(value) {
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.loadData();
            },
        }
    };
</script>
